<template>
    <div class="navbar_zong">
        <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
            <div class="container-fluid container">
                <img src="../assets/school_badge.png" alt="" class="img-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent" v-if="!$store.state.user.is_superuser">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'home' }">首页</router-link>
                        </li>
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            图书资源
                        </a>
                        <ul class="dropdown-menu">
                            <li><router-link class="dropdown-item" :to="{ name: 'literature' }">文学</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'history' }">历史</router-link></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'law' }">法律</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'finance' }">财经</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'scientific' }">科技</router-link></li>
                        </ul>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'mybookshelf' }" v-if="$store.state.user.is_login">我的书架</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'bookfriend' }" v-if="$store.state.user.is_login">书友圈</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'recommend' }" v-if="$store.state.user.is_login">智能推荐</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'ordinarydialogue', params: {userid: 48} }" v-if="$store.state.user.is_login">联系我们</router-link>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link active" aria-current="page" v-if="$store.state.user.is_login" style="cursor: pointer;" @click="logout">退出登录</a>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active img-field" aria-current="page" :to="{ name: 'userinfo' }" v-if="$store.state.user.is_login"><img :src="$store.state.user.photo" alt="" class="img-field-item"></router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'login' }" v-if="!$store.state.user.is_login">登录</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'register' }" v-if="!$store.state.user.is_login">注册</router-link>
                        </li>
                    </ul>
                    <form class="d-flex" role="search" @submit.prevent="to_search">
                        <input class="form-control me-2" type="search" placeholder="请书入图书名称" v-model="search_content" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">搜索</button>
                        <!-- <button type="button" class="btn btn-success"></button> -->
                    </form>
                </div>
                <div class="collapse navbar-collapse" id="navbarSupportedContent" v-if="$store.state.user.is_superuser">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'home' }">首页</router-link>
                        </li>
                        <!-- <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            图书资源
                        </a>
                        <ul class="dropdown-menu">
                            <li><router-link class="dropdown-item" :to="{ name: 'literature' }">文学</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'history' }">历史</router-link></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'law' }">法律</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'finance' }">财经</router-link></li>
                            <li><router-link class="dropdown-item" :to="{ name: 'scientific' }">科技</router-link></li>
                        </ul>
                        </li> -->
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'manageaccount' }" v-if="$store.state.user.is_login">用户管理</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'launchbook' }" v-if="$store.state.user.is_login">上架书籍</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'removebook' }" v-if="$store.state.user.is_login">下架书籍</router-link>
                        </li>
                        <!-- <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'managestudent' }" v-if="$store.state.user.is_login">用户管理</router-link>
                        </li> -->
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'bookfriend' }" v-if="$store.state.user.is_login">书友圈</router-link>
                        </li>
                        <!-- <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'recommend' }" v-if="$store.state.user.is_login">智能推荐</router-link>
                        </li> -->
                        <!-- <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'dialogue' }" v-if="$store.state.user.is_login">联系我们</router-link>
                        </li> -->
                        <li class="nav-item">
                        <a class="nav-link active" aria-current="page" v-if="$store.state.user.is_login" style="cursor: pointer;" @click="logout">退出登录</a>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active img-field" aria-current="page" :to="{ name: 'userinfo' }" v-if="$store.state.user.is_login"><img :src="$store.state.user.photo" alt="" class="img-field-item"></router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'login' }" v-if="!$store.state.user.is_login">登录</router-link>
                        </li>
                        <li class="nav-item">
                        <router-link class="nav-link active" aria-current="page" :to="{ name: 'register' }" v-if="!$store.state.user.is_login">注册</router-link>
                        </li>
                    </ul>
                    <form class="d-flex" role="search" @submit.prevent="to_search_admin">
                        <input class="form-control me-2" type="search" placeholder="请书入图书名称" aria-label="Search" v-model="search_content">
                        <button class="btn btn-outline-success" type="submit">搜索</button>
                        <!-- <button type="button" class="btn btn-success"></button> -->
                    </form>
                </div>
            </div>
        </nav>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery';
import { useRouter } from 'vue-router';
export default {
    name: "NavBar",
    setup() {
        const store = useStore();
        const search_content = ref('');
        const book_list = ref([]);
        const filter_book_list = ref([]);
        const user_list = ref([]);
        const filter_user_list = ref([]);
        const router = useRouter();

        $.ajax({
            url: "http://47.121.28.202:8000/settings/getbooks/",
            type: "GET",
            success(resp) {
                book_list.value = resp;
            }
        })

        $.ajax({
            url: "http://47.121.28.202:8000/settings/studentlist/",
            type: "GET",
            success(resp) {
                user_list.value = resp;
            }
        })

        const logout = () => {
            store.commit("logout");
        };
        
        const to_search = () => {
            filter_book_list.value = [];
            for (let i of book_list.value) {
                if ((i.title.includes(search_content.value) || i.author.includes(search_content.value)) && search_content.value !== "") {
                    filter_book_list.value.push(i); 
                }
            }
            store.dispatch('updateSearchResults', filter_book_list.value); 
            router.push({
                name: 'searchbook',
            })
            search_content.value = "";
        }

        const to_search_admin = () => {
            const is_book = ref(false);
            filter_user_list.value = [];
            const is_user = ref(false);
            filter_book_list.value = [];
            for (let i of book_list.value) {
                if (i.title.includes(search_content.value) || i.author.includes(search_content.value)) {
                    filter_book_list.value.push(i);
                    is_book.value = true;
                    is_user.value = false; 
                }
            }
            for (let i of user_list.value) {
                if (i.username.includes(search_content.value)) {
                    filter_user_list.value.push(i);
                    is_user.value = true;
                    is_book.value = false;
                }
            }
            if (is_book.value && !is_user.value) {
                store.dispatch('updateSearchResults', filter_book_list.value);
                filter_user_list.value = [];
                store.dispatch('updateSearchUserResults', filter_user_list.value);
            } else {
                store.dispatch('updateSearchUserResults', filter_user_list.value);
                filter_book_list.value = [];
                store.dispatch('updateSearchResults', filter_book_list.value);
            }
            if (store.state.user.is_login) {
                router.push({
                    name: 'adminsearch',
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
            search_content.value = "";
        }

        return {
            logout,
            to_search,
            search_content,
            to_search_admin
        }
    }
}
</script>

<style>
.btn-outline-success {
    height: 40px;
    width: 80px;
}
.img-fluid {
    height: 40px;
    width: 200px;
}
.img-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 100px;
}
.img-field-item {
    border-radius: 50%;
    height: 35px;
    position: absolute;
    top: 11px;
}
</style>